<template>
  <!--分页，另存为-->
  <div class="pagination_page">
    <Row>
      <Col span="10">
        <span v-if="!minpage" class="page_text">共{{pageTotal}}条记录 第{{pageNum}}/{{Math.ceil(pageTotal/pageSize)==0?1:Math.ceil(pageTotal/pageSize)}}页</span>

        <span v-if="anotherSave">另存为:</span>
        <!-- <span v-if="anotherSave" @click="anotherSaveFn(1)" class="pdf"></span> -->
        <span v-if="anotherSave" @click="anotherSaveFn(2)" class="exsel"></span>
      </Col>

      <Col :span="`${minpage?'24':'14'}`" style="text-align: right;">
        <Page
          :total="pageTotal"
          :current="pageNum"
          :page-size="pageSize"
          :show-elevator="!minpage"
          :show-sizer="!minpage"
          placement="top"
          @on-change="handlePage"
          @on-page-size-change="handlePageSize"
          :page-size-opts="[20, 50, 100]"
        ></Page>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 是否是min型的
    minpage: {
      type: Boolean,
      default: false
    },
    //是否另存为
    anotherSave: {
      type: Boolean,
      default: false
    },
    pageTotal: {
      type: Number,
      default: 100
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  methods: {
    handlePage (value) {
      // this.pageNum = value
      this.$emit('onChangePage', value)
    },
    handlePageSize (value) {
      // this.pageSize = value
      this.$emit('onChangeHandlePage', value)
    },
    anotherSaveFn (val) {
      this.$emit('save-file-fn', val)
    }

  },
  created () {},
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
$imgUrl: "~@/assets/img/";
.pagination_page {
  width: 100%;
  position: relative;
  height: 46px;line-height: 46px;
  .page_text {
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 32px;
  }
  /deep/.ivu-page-item-active {
    border-color: #0893fd;
    background-color: #0893fd;
    a {
      color: #ffffff;
    }
  }
  /deep/.ivu-page-item:hover {
    border-color: #0893fd;
    background-color: #0893fd;
    a {
      color: #ffffff;
    }
  }
  /deep/.ivu-page-next:hover,
  .ivu-page-prev:hover {
    border-color: #2d8cf0;
    background-color: #0893fd;
    a {
      color: #ffffff;
    }
  }

  span {
    display: inline-block;
    width: auto;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    margin-right: 10px;
  }
  .pdf {
    background: url($imgUrl+'pdf-icon.png') left center
      no-repeat;
    width: 35px;
    cursor: not-allowed;
  }
  .exsel {
    background: url($imgUrl+'excel-icon.png') left center
      no-repeat;
    width: 35px;
    cursor: pointer;
  }
}
/deep/ .ivu-page-options {
   vertical-align: initial;
}
</style>
